<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表Demo</title>
		<script src="./JQuery/jquery-3.6.0.min.js"></script>
		<script>
			// function fn1(){
			// 	$.ajax({
			// 		url:"http://localhost:8090/user/getAll",
			// 		data:null,
			// 		//ajax引擎 代理思想 回调函数交还数据
			// 		success:function(data){
			// 			showTable(data);
			// 			console.log("Success!")
			// 		},
			// 		error:function(data){
			// 			console.log("Error!!!");
			// 		}
					
			// 	})
			// }
			
			// function showTable(data){
			// 	for (var i = 0; i < data.length; i++) {
			// 		var str="<tr align='center'>"+
			// 		"<td>"+data[i].id+"</td>"+
			// 		"<td>"+data[i].name+"</td>"+
			// 		"<td>"+data[i].age+"</td>"+
			// 		"<td>"+data[i].sex+"</td>"+
			// 		"</td>"
			// 		$("#d4_t2").append(str);
			// 	}
			// }
			
			
			//ajax实现异步的原因：
			/* 
			 在前端后端之间有ajax引擎
			 负责传数据，这样前端传完数据可以忙其他事情
			 传递过程中
			 
			 */
			//
			//函数式编程
			//$(function(){})
			/* 
			常见ajax写法
			 1.$.ajax({})
			 2.$.get()
			 3.$.post()
			 4.$.getJSON()
			 
			 async异步 只有$.ajax()有的参数，默认设置为true异步，设置成fales就是同步调用
			 */
			
			
			/* 
			 语法说明
			 $.get()(url,data,function(data){},dataType)
			 参数说明：
			 1.url：请求服务器的网址
			 2.data前端想服务器传递的参数 字符串
			 3.回调函数：请求成功之后开始回调
			 4.dataType：返回值结果的数据类型 
			 
			 不传参可以不写data 
			 dataType可以不写 有默认
			 
			 */
			$(function(){
			var url="http://localhost:8090/user/getAll";
			/* 
			 data语法：想传值id=100 name="黑熊精"
			 1.js对象写法:
			 {id:100,name:"黑熊精"}
			 2.字符串拼接写法
			 id=100&name=黑熊精
			 */
			// var data = "id=100&name=黑熊精";
			var data = {id:100,name:"黑熊精"};
			$.get(url,data,function(data){
				// console.log(data);
				var tHead=
				`<tr align="center">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>`
				$("#d4_t2").html(tHead);
				/* 
				in关键字 获取下标
				of关键字 获取下标处的对象
				
				 */
				for(user of data){
					/*
					 模板字符串
					 ES5开始的写法,原生js即可支持  
					 1.反引号 换行不用拼串
					 2.动态从对对象中获取数据 ${}
					 */
					var name=user.name
					var tr = 
					`<tr align='center'>
					    <td>${user.id}</td>
					    <td>${name}</td>
					    <td>${user.age}</td>
					    <td>${user.sex}</td>
						<td>操作
						<button >修改</button>
						<button >删除</button>
						</td>
					</tr>`
					
					$("#d4_t2").append(tr);
				}
			})
				
			})
			
			
			
		</script>
	</head>
	<body>
		<form action="#" method="post" id="de_f2">
			<table border="1px" width="80%" align="center" id="d4_t1">
				<tr align="center">
					<td colspan="4">
						<input type="button" value="显示demo_user表数据"  /><!-- //onclick="fn1();" -->
					</td>
				</tr>
				<tr align="center">
					<td colspan="4">
						<h1>用户列表</h1>
					</td>
				</tr>
				


			</table>
			<table border="1px" width="80%" align="center" id="d4_t2">
				<tr align="center">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
				
				
			</table>

		</form>
	</body>
</html>
